import React, { Component } from 'react';

class NarBar extends Component {
    constructor() {
        super();
        // console.log("NarBar Constructor")
    }

    componentDidMount() {
        // console.log("NarBar Mount")
    }

    componentDidUpdate() {
        // console.log("NarBar Update");
    }

    componentWillUnmount() {
        console.log("NarBar Unmount");
    }

    render() {
        console.log("NarBar Render");
        return (<React.Fragment>
            <nav className="navbar bg-body-tertiary">
                <div className="container-fluid">
                    <span className="navbar-brand mb-0 h1">Navbar BoxCount={this.props.BoxCount}</span>
                </div>
            </nav>
        </React.Fragment>);
    }
}

export default NarBar;

// 改为无状态函数组件
// const NarBar = ({BoxCount}) => {
//     return (<React.Fragment>
//         <nav className="navbar bg-body-tertiary">
//             <div className="container-fluid">
//                 <span className="navbar-brand mb-0 h1">Navbar BoxCount={BoxCount}</span>
//             </div>
//         </nav>
//     </React.Fragment>);
// }
 
// export default NarBar;